<template>
	<view v-if="showPopup" class="uni-popup" :class="[popupstyle]" @touchmove.stop.prevent="clear" style="z-index: 99999999 !important;">
		<uni-transition v-if="maskShow" :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans"
		  />
		<!-- <uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
			<view class="uni-popup__wrapper-box" @click.stop="clear">
				<slot />
			</view>
		</uni-transition> -->
		<view style="position: fixed;top: 17%;left: 10%; z-index: 99999999 !important;width: 80%;background-color: #fff;border-radius: 20upx;color: #000000;overflow: hidden;padding: 3% 0;">
			<view style="text-align: center;font-size: 38upx;font-weight: 550;padding-bottom: 20upx;border-bottom: 1upx solid #EDEDED;">
				消费规则
			</view>
			<scroll-view scroll-y="true" style="height: 55vh;background-color: #fff;width: 92%;padding: 0 4%;font-size: 24upx;">
				<view style="color: #f00;text-indent: 2rem;">
					请仔细阅读本规则的所有内容,当您点击下面“同意”键时即视为您已仔
					
					细阅读本协议所有内容,同意接受本协议所有规定并愿受其约束。本规则自此生
					
					效。因消费专区产品的特殊性,恕不退换货,请严格遵守肽好购的消费规则。如
					
					无法遵守,请勿参与消费。
				</view>
				
				<view style="text-indent: 1rem;margin-top: 20upx;">
					1. 消费有效期与支付
				</view>
				
				每日消费时间为9:30-21:30您的消费货款定金由微信全权管理。
				
				<view style="text-indent: 1rem;">
					2. 消费条件
				</view>
				
				50人参与消费,达到参购人数后,系统统计1小时即可消费。
				
				<view style="text-indent: 1rem;">
					3. 参购自愿
				</view>
				
				消费由会员自然组成,会员自由参购。
				
				<view style="text-indent: 1rem;">
					4. 消费成功
				</view>
				
				消费后,消费成功人员的商品,平台按所填写的收货地址在24小时内发货。
				
				<view style="text-indent: 1rem;">
					5. 消费失败
				</view>
				
				消费后,未拼到商品的视为消费失败,货款定金每天退回至原微信中。
				<view style="text-indent: 1rem;">
					6. 消费失效
				</view>
				
				每日超过21:30未达成相应参购人数的专区,则该消费失效,消费失效的订单,消费货款定金每天原路退回至原微信账户中。
				
				
				
				<view style="text-indent: 0rem;margin-top: 30upx;">
					欺诈和恶意行为定义:
				</view>
				
				<view style="text-indent: 1rem;">
					1.故意或频繁使用无效的或不准确的收货地址和收货人信息,导致卖家无法按时发货,妨害肽好购运营秩序的;
				</view>
				
				<view style="text-indent: 1rem;">
					2.利用一个或多个账户,在短时间恶意大量拍商品不付款,导致卖家商品下架,影响卖家正常秩序的;
				</view>
				
				<view style="text-indent: 1rem;">
					3.利用退款流程的便利性,实现其它牟利目的,购买商品后异常频繁地联系客服退款,影响正常的交易秩序
				</view>
				<view style="text-indent: 1rem;">
					4.买家大量拍下不付款,买家使用错误收货信息买家拍下目的为涉嫌不当获取利益,买家拍下目的为涉嫌不当获取运费险/运费,买家无真实购买意愿;
				</view>
				<view style="text-indent: 1rem;">
					5.买家退货信息虚假(错误单号、重复单号等),买家实际收到货却称未到货的,涉嫌获取不当利益,买家故意损坏货物申请退款,涉嫌获取不当利益
				</view>
				<view style="color: #f00;margin-top: 30upx;">
					提示:如果买家违反国家要求恶意多号操作,涉嫌欺诈以及恶意行为的,平台有权关闭涉嫌欺诈违规行为的用户账号,并有权删除该账号下所有相关信息,如买家涉嫌欺诈罪的,肽好购平台依法保留起诉的权利。
				</view>
			
			</scroll-view>
			<view style="display: flex;justify-content: space-around;border-top: 1upx solid #EDEDED;">
				<view style="width: 40%;height: 80upx;background-color: #F20831;border-radius: 40upx;text-align: center;line-height: 80upx;color: #fff;margin-top: 20upx;" @click="disagree">
					不同意
				</view>
				<view style="width: 40%;height: 80upx;background-color: #2EBA42;border-radius: 40upx;text-align: center;line-height: 80upx;color: #fff;margin-top: 20upx;" @click="xieyi">
					同意
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniTransition from '../uni-transition/uni-transition.vue'
	import popup from './popup.js'
	/**
	 * PopUp 弹出层
	 * @description 弹出层组件，为了解决遮罩弹层的问题
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} type = [top|center|bottom] 弹出方式
	 * 	@value top 顶部弹出
	 * 	@value center 中间弹出
	 * 	@value bottom 底部弹出
	 * 	@value message 消息提示
	 * 	@value dialog 对话框
	 * 	@value share 底部分享示例
	 * @property {Boolean} animation = [ture|false] 是否开启动画
	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
	 */

	export default {
		name: 'UniPopup',
		components: {
			uniTransition
		},
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			// message: 消息提示 ; dialog : 对话框
			type: {
				type: String,
				default: 'center'
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			}
		},
		provide() {
			return {
				popup: this
			}
		},
		mixins: [popup],
		watch: {
			/**
			 * 监听type类型
			 */
			type: {
				handler: function(newVal) {
					this[this.config[newVal]]()
				},
				immediate: true
			},
			/**
			 * 监听遮罩是否可点击
			 * @param {Object} val
			 */
			maskClick(val) {
				this.mkclick = val
			}
		},
		data() {
			return {
				duration: 300,
				ani: [],
				showPopup: false,
				showTrans: false,
				maskClass: {
					'position': 'fixed',
					'bottom': 0,
					'top': 0,
					'left': 0,
					'right': 0,
					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
				},
				transClass: {
					'position': 'fixed',
					'left': 0,
					'right': 0,
				},
				maskShow: true,
				mkclick: true,
				popupstyle: 'top'
			}
		},
		created() {
			this.mkclick = this.maskClick
			if (this.animation) {
				this.duration = 300
			} else {
				this.duration = 0
			}
		},
		methods: {
			clear(e) {
				// TODO nvue 取消冒泡
				e.stopPropagation()
			},
			open() {
				this.showPopup = true
				this.$nextTick(() => {
					new Promise(resolve => {
						clearTimeout(this.timer)
						this.timer = setTimeout(() => {
							this.showTrans = true
							// fixed by mehaotian 兼容 app 端
							this.$nextTick(() => {
								resolve();
							})
						}, 50);
					}).then(res => {
						// 自定义打开事件
						clearTimeout(this.msgtimer)
						this.msgtimer = setTimeout(() => {
							this.customOpen && this.customOpen()
						}, 100)
						this.$emit('change', {
							show: true,
							type: this.type
						})
					})
				})
			},
			close(type) {
				this.showTrans = false
				this.$nextTick(() => {
					this.$emit('change', {
						show: false,
						type: this.type
					})
					clearTimeout(this.timer)
					// 自定义关闭事件
					this.customOpen && this.customClose()
					this.timer = setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
			},
			onTap() {
				if (!this.mkclick) return
				this.close()
			},
			disagree(){
				this.$emit('disagree')
			},
			xieyi(){
				this.$emit('xieyi')
				this.onTap()
			},
			towangzhan(){
				this.$emit('towangzhan')
			},
			/**
			 * 顶部弹出样式处理
			 */
			top() {
				this.popupstyle = 'top'
				this.ani = ['slide-top']
				this.transClass = {
					'position': 'fixed',
					'left': 0,
					'right': 0,
				}
			},
			/**
			 * 底部弹出样式处理
			 */
			bottom() {
				this.popupstyle = 'bottom'
				this.ani = ['slide-bottom']
				this.transClass = {
					'position': 'fixed',
					'left': 0,
					'right': 0,
					'bottom': 0
				}
			},
			/**
			 * 中间弹出样式处理
			 */
			center() {
				this.popupstyle = 'center'
				this.ani = ['zoom-out', 'fade']
				this.transClass = {
					'position': 'fixed',
					/* #ifndef APP-NVUE */
					'display': 'flex',
					'flexDirection': 'column',
					/* #endif */
					'bottom': 0,
					'left': 0,
					'right': 0,
					'top': 0,
					'justifyContent': 'center',
					'alignItems': 'center'
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uni-popup {
		position: fixed;
		/* #ifndef APP-NVUE */
		z-index: 99999;
		/* #endif */
	}

	.uni-popup__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: $uni-bg-color-mask;
		opacity: 0;
	}

	.mask-ani {
		transition-property: opacity;
		transition-duration: 0.2s;
	}

	.uni-top-mask {
		opacity: 1;
	}

	.uni-bottom-mask {
		opacity: 1;
	}

	.uni-center-mask {
		opacity: 1;
	}

	.uni-popup__wrapper {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
	}

	.top {
		/* #ifdef H5 */
		top: var(--window-top);
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
	}

	.bottom {
		bottom: 0;
	}

	.uni-popup__wrapper-box {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: relative;
		/* iphonex 等安全区设置，底部安全区适配 */
		/* #ifndef APP-NVUE */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		/* #endif */
	}

	.content-ani {
		// transition: transform 0.3s;
		transition-property: transform, opacity;
		transition-duration: 0.2s;
	}


	.uni-top-content {
		transform: translateY(0);
	}

	.uni-bottom-content {
		transform: translateY(0);
	}

	.uni-center-content {
		transform: scale(1);
		opacity: 1;
	}
</style>
